refactor: migrate multichain account components to DS by gantunesr · Pull Request #30249 · MetaMask/metamask-mobile

gantunesr · 2026-05-15T13:28:11Z

Description

Migrates the MultichainAccounts temporary component internals away from deprecated component-library imports and onto @metamask/design-system-react-native equivalents.

This updates account rows, external account rows, account selector list pieces, address rows, checkboxes, search fields, text, icons, sensitive text, and avatar usage. It also adds a small avatar variant compatibility helper so legacy persisted selector values such as Maskicon, JazzIcon, and Blockies continue to map to the DS AvatarAccountVariant API.

Changelog

CHANGELOG entry: null

Related issues

Fixes: https://consensyssoftware.atlassian.net/browse/MUL-1693

Manual testing steps

Feature: Multichain account component DS migration

  Scenario: account selector and address rows preserve existing behavior
    Given a wallet with multichain account groups and network addresses

    When the account selector and multichain address list are opened
    Then account rows, external account rows, network avatars, checkboxes, copy actions, and search fields render and behave as before

Screenshots/Recordings

Screen.Recording.2026-05-15.at.4.13.43.PM.mov

Pre-merge author checklist

I've followed MetaMask Contributor Docs and MetaMask Mobile Coding Standards.
I've completed the PR template to the best of my ability
I've included tests if applicable
I've documented my code using JSDoc format if applicable
I've applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Performance checks (if applicable)

I've tested on Android
- Ideally on a mid-range device; emulator is acceptable
I've tested with a power user scenario
- Use these power-user SRPs to import wallets with many accounts and tokens
I've instrumented key operations with Sentry traces for production performance metrics
- See trace() for usage and addToken for an example

For performance guidelines and tooling, see the Performance Guide.

Pre-merge reviewer checklist

I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

Note

Medium Risk
Medium risk because it replaces core account-selector UI primitives (avatars, text, search, checkbox, toast wiring) with Design System components, which could cause subtle rendering/interaction regressions across account selection flows.

Overview
Migrates the temporary MultichainAccounts UI components (AccountCell, selector list cells/headers, external account rows, address rows, and address rows list) from deprecated component-library primitives to @metamask/design-system-react-native equivalents (text, icons, sensitive text, avatars, search, checkbox).

Introduces avatarAccountVariant compatibility helpers to map legacy persisted avatar type strings (Maskicon/JazzIcon/Blockies) to DS AvatarAccountVariant, and updates tests to assert DS components/testIDs (including new checkbox icon and network avatar test IDs) and to use timer-safe act/fake-timer handling for copy/toast feedback.

^{Reviewed by Cursor Bugbot for commit 9a035d1. Bugbot is set up for automated code reviews on this repo. Configure here.}

ccharly · 2026-05-20T13:43:15Z

        closeButtonOptions: {
-          variant: ButtonIconVariant.Icon,
-          iconName: ToastIconName.Close,
+          variant: 'Icon',


I see some ButtonIconVariant in the DS package, but none of them matches 'Icon', should we use ButtonIconVariant.Default instead?

I don't think so because the interface expects the value Icon and ButtonIconVariant.Default is set to default. @MetaMask/design-system can you double check this?

@ccharly lets wait for the team to chime in and lets not block the PR

(I'll keep this unresolved for visibility)

ccharly · 2026-05-20T13:47:12Z

+  (typeof AvatarAccountType)[keyof typeof AvatarAccountType];
+
+export const getAvatarAccountVariant = (
+  avatarAccountType: AccountAvatarVariant,


Should this also use LegacyAvatarAccountType?

Suggested change

avatarAccountType: AccountAvatarVariant,

avatarAccountType: AccountAvatarVariant | LegacyAvatarAccountType,

AccountAvatarVariant already takes into account the legacy type:

export type AccountAvatarVariant = | AvatarAccountVariant | LegacyAvatarAccountType;

…to gar/refactor/mul-1693

github-actions · 2026-05-21T11:30:11Z

🔍 Smart E2E Test Selection

Selected E2E tags: SmokeAccounts, SmokeConfirmations, SmokeNetworkExpansion, SmokeNetworkAbstractions, SmokeSwap, SmokeWalletPlatform, SmokeIdentity
Selected Performance tags: @PerformanceAccountList
Risk Level: medium
AI Confidence: 78%

click to see 🤖 AI reasoning details

E2E Test Selection:
The PR migrates MultichainAccounts component library components from legacy internal design system components to the new @metamask/design-system-react-native package. Key changes include:

AccountCell.tsx: Migrated AvatarAccount, Text, SensitiveText, Icon, Avatar to new DS equivalents. Props renamed (accountAddress→address, type→variant, imageSource→src). TextVariant/TextColor enum values updated.
MultichainAccountSelectorList.tsx: Migrated Text, TextFieldSearch to new DS. testID prop moved to inputProps.testID in TextFieldSearch - this could break E2E tests that query by this testID.
AccountListCell.tsx: Migrated Checkbox to new DS. Props changed (isChecked→isSelected, onPress→onChange). New ACCOUNT_LIST_CELL_CHECKBOX_ICON_TEST_ID added.
ExternalAccountCell.tsx: Migrated AvatarAccount, Avatar, Text to new DS.
MultichainAddressRow.tsx: Migrated Avatar to AvatarNetwork, updated toast handling.
avatarAccountVariant.ts: New utility bridging legacy AvatarAccountType strings to new AvatarAccountVariant enum.

Impact assessment:

MultichainAccountSelectorList is used in: main AccountSelector (account switching), confirmations AccountSelector, MultichainAccountConnectMultiSelector (dApp connections), Bridge RecipientSelectorModal, and Notifications settings.
AccountCell is used throughout account list flows.
MultichainAddressRow is used in AddressList and PrivateKeyList (wallet details/SRP export).

Tags selected:

SmokeAccounts: Account selector, account switching, SRP export flows use these components directly.
SmokeConfirmations: Confirmations AccountSelector uses MultichainAccountSelectorList - account selection in confirmation flows.
SmokeNetworkExpansion: MultichainAccountConnectMultiSelector uses this list for dApp connections (Solana/multi-chain).
SmokeNetworkAbstractions: dApp chain permissions and account selection flows.
SmokeSwap: Bridge RecipientSelectorModal uses MultichainAccountSelectorList for recipient selection.
SmokeWalletPlatform: Multi-SRP architecture, account management, wallet details use MultichainAddressRow.
SmokeIdentity: Account sync features use account list components.

The testID change in TextFieldSearch (testID → inputProps.testID) is particularly risky as it could break E2E tests that query the search input by testID in account selector flows.

Performance Test Selection:
The MultichainAccountSelectorList uses FlashList for rendering account lists. The migration to new design system components could affect rendering performance of the account list. The @PerformanceAccountList tag covers account selector and multi-account scenarios which directly exercise these changed components. Other performance tags are not relevant as the changes are limited to account list UI components.

View GitHub Actions results

sonarqubecloud · 2026-05-21T11:50:09Z

Quality Gate passed

Issues
0 New issues
0 Accepted issues

Measures
0 Security Hotspots
94.1% Coverage on New Code
0.0% Duplication on New Code

See analysis details on SonarQube Cloud

ccharly

LGTM (not tested)

ccharly · 2026-05-21T11:52:48Z

      const toastOptions: CopyToastOptions = {
        variant: 'Plain',
-        labelOptions: [{ label: copyParams.toastMessage }],
+        labelOptions: [{ label: copyParams.toastMessage ?? '' }],


Nit: Not sure we really need the fallback part here since we check for && copyParams.toastMessage above 🤔

ccharly · 2026-05-21T11:53:39Z

        closeButtonOptions: {
-          variant: ButtonIconVariant.Icon,
-          iconName: ToastIconName.Close,
+          variant: 'Icon',


(I'll keep this unresolved for visibility)

refactor: migrate multichain account components to DS

ece36e1

github-actions Bot added the pr-not-ready-for-e2e Skip E2E and block merging. Remove this label once the PR is ready to run the E2E tests. label May 15, 2026

metamaskbotv2 Bot added the team-accounts-framework Accounts team label May 15, 2026

github-actions Bot added the size-M label May 15, 2026

test: cover multichain account DS migration

245a18f

gantunesr marked this pull request as ready for review May 15, 2026 20:01

gantunesr requested a review from a team as a code owner May 15, 2026 20:01

gantunesr removed the pr-not-ready-for-e2e Skip E2E and block merging. Remove this label once the PR is ready to run the E2E tests. label May 15, 2026

Merge branch 'main' into gar/refactor/mul-1693

6c7fef7

gantunesr added the no-changelog no-changelog Indicates no external facing user changes, therefore no changelog documentation needed label May 20, 2026

ccharly reviewed May 20, 2026

View reviewed changes

gantunesr added 2 commits May 20, 2026 18:04

test: explain copy feedback timer flush

168d775

Merge branch 'main' of https://github.com/MetaMask/metamask-mobile in…

9a035d1

…to gar/refactor/mul-1693

ccharly approved these changes May 21, 2026

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

refactor: migrate multichain account components to DS#30249

refactor: migrate multichain account components to DS#30249
gantunesr wants to merge 5 commits into
mainfrom
gar/refactor/mul-1693

gantunesr commented May 15, 2026 •

edited by cursor Bot

Loading

Uh oh!

ccharly May 20, 2026

Uh oh!

gantunesr May 20, 2026 •

edited

Loading

Uh oh!

ccharly May 21, 2026

Uh oh!

ccharly May 20, 2026

Uh oh!

gantunesr May 20, 2026

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented May 21, 2026

Uh oh!

sonarqubecloud Bot commented May 21, 2026

Uh oh!

ccharly left a comment

Uh oh!

ccharly May 21, 2026

Uh oh!

ccharly May 21, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

	avatarAccountType: AccountAvatarVariant,
	avatarAccountType: AccountAvatarVariant \| LegacyAvatarAccountType,

Uh oh!

Conversation

gantunesr commented May 15, 2026 • edited by cursor Bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Changelog

Related issues

Manual testing steps

Screenshots/Recordings

Pre-merge author checklist

Performance checks (if applicable)

Pre-merge reviewer checklist

Uh oh!

ccharly May 20, 2026

Choose a reason for hiding this comment

Uh oh!

gantunesr May 20, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ccharly May 21, 2026

Choose a reason for hiding this comment

Uh oh!

ccharly May 20, 2026

Choose a reason for hiding this comment

Uh oh!

gantunesr May 20, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented May 21, 2026

🔍 Smart E2E Test Selection

Uh oh!

sonarqubecloud Bot commented May 21, 2026

Quality Gate passed

Uh oh!

ccharly left a comment

Choose a reason for hiding this comment

Uh oh!

ccharly May 21, 2026

Choose a reason for hiding this comment

Uh oh!

ccharly May 21, 2026

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

gantunesr commented May 15, 2026 •

edited by cursor Bot

Loading

gantunesr May 20, 2026 •

edited

Loading